CSS Variables

支援度:Can I Use

一直沒有機會實作Light/Dark Mode的切換，CSS Variables的出現讓切換變得更加方便，趁著這次機會好好來練習一下

通常同一套layout如果要切換不同主題，都是在最外層套上主題class，如下:

  /* template */
    <div class="container" class="dark">
        ...
    </div>

以往每轉換一個主題，需要針對每一個要轉換樣式的元素重新進行調整，而這種方式，有可能會漏改元素以及讓程式碼非常繁複。如下:

    
  /* Style for Light Theme */
  .light section{
      background:white;
  }
  .light p{
      color:black;
  }
  .light a{
      color:blue;
  }
  
  /* Style for Dark Theme */
  .dark section{
      background:black;
  }
  .dark p{
      color:white;
  }
  .dark a{
      color:aqua;
  }
  ...

有了CSS Variables，只要在根元素設定好變數，根據不同的主題切換，這些變數會隨著不同主題的切換而自動調整，使得程式碼變得更簡潔且易於維護，不再需要為每個元素單獨設定樣式，而且主題切換也更加輕鬆。如下:

  /* CSS Variables Setting */
  :root{
      background:var(--background-primary);
      color:var(--text-primary);
      accent-color:var(--accent-primary);
  }
  
  /* CSS Variables for Light Theme */
  .light{
      --background-primary:white;
      --text-primary:black;
      --accent-primary:blue;
  }
  
  /* CSS Variables for Dark Theme */
  .dark{
      --background-primary:black;
      --text-primary:white;
      --accent-primary:aqua;
  }
  
  /* Common Styles */
  section{
      background:var(--background-primary);
  }
  p{
      color:var(--text-primary);
  }
  a{
      color:var(--accent-primary);
  }
  ...

Codepen範例

IT15-Day03-Create A Dark/Light Mode Switch with CSS Variables
參考MDN寫的一個小範例，大家可以試試看!
圖片來源:MDN

color-constract:一個實驗中的CSS屬性,會從列出的顏色中找出一個對比度最高的,如果之後支援度變高,感覺可以更便利的設定各種主題下的顏色

參考來源

• https://www.casper.tw/css/2019/12/22/css-dark-mode/